<script setup>
 import {usevideo} from '@/stores/video.js'
 const storevideo =usevideo()
</script>

<template>
  <div class="contain">
    <div v-for="item in storevideo.recvideo" :key="item.id" class="bigviewbox">
          <img :src="item.filename1" alt="" class="small-image">
          <div class="image-contain">
          <div class="leftbox">
            <img :src="item.filename2" alt="" class="left-image">
          </div>
          <div class="rightbox">
            <span style="font-size: larger; color: white;">{{item.name1}}</span>
            <span>&nbsp;</span>
            <span style="font-size: larger; color: white;">{{item.name2}}</span>
          </div>
        </div>
         
        </div>
  </div>
</template>

<style  scoped>
.contain{
  top: 0;
  left: 205px;
  background-color: rgb(20, 20, 20);
  width: 1650px;
  height: 2000px;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; 
  
}
.bigviewbox{
  margin-top: 100px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  height: 550px;
  cursor: pointer;
  transition: filter 0.3s;
}
.bigviewbox:hover span {
  color: #ff9900; 
}
.small-image {
  width: 500px;
  height: 330px; 
  border-radius: 15px;
}
.left-image{
  width: 60px;
  height: 90px;
  float: left;
}
.leftbox{
  width: 80px;
  margin-left: 15px;
  margin-top: 10px;
}
.rightbox {
  margin-left: 90px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.bigviewbox:hover img {
  filter: brightness(1.2); 
}
.image-contain{
  width: 500px;
  height: 120px;
  border-radius: 10px;
  background-color: rgb(70,70,70);
}
</style>
